<template>
  <BaseDialog
    :title="(!props.item.managerId ? '新增' : '编辑') + '网格经理'"
    :handleCancel="handleCancel"
    :dialogVisible="props.dialogVisible"
    width="700px"
  >
    <BaseForm
      ref="baseForm"
      type="rule"
      :handleOk="handleOk"
      :handleCancel="handleCancel"
      :items="formItems"
      v-model:form="ruleForm"
      :rules="rules"
      :refresh="handleSearch"
      label-width="120px"
    >
      <template #select-pop>
        <CommunityTags v-model:list="communityList" />
      </template>
    </BaseForm>
  </BaseDialog>
  <AssociatedCommunity
    v-if="visibleAssociatedCommunity"
    v-model:dialogVisible="visibleAssociatedCommunity"
    v-model:communityDtoList="communityList"
    :item="ruleForm"
    title="相关片区/村社"
    :type="1"
    :showManager="false"
    :showPower="false"
  ></AssociatedCommunity>
</template>

<script setup lang="ts">
import BaseForm from '@/components/base-form.vue';
import BaseDialog from '@/components/base-dialog.vue';
import { basicConfigService } from '@/api/basicConfig';
const validatePhoneNumber = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const regex = /^1[3,4,5,6,7,8,9]\d{9}$/;
    if (!regex.test(value)) {
      callback(new Error('请输入正确的手机号码'));
    } else {
      callback();
    }
  }
};
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
  handleSearch: {
    type: Function,
  },
});
const visibleAssociatedCommunity = ref(false);
const emit = defineEmits(['update:dialogVisible']);
const handleFn = () => {
  visibleAssociatedCommunity.value = true;
};
const baseForm = ref();
watch(visibleAssociatedCommunity, (val) => {
  if (val) {
    baseForm.value.selectPop[0].blur();
  } else {
  }
});

const formItems = ref([
  {
    name: '姓名',
    key: 'managerName',
    type: 'input',
    maxlength: '20',
  },
  {
    name: '手机号',
    key: 'phoneNumber',
    type: 'input',
  },
  {
    name: '微信ID',
    key: 'wxId',
    type: 'textarea',
    placeholder: '请输入微信id（请到微信群管理的群成员列表中查找对应的微信id）',
    /* placeholder:
      '请输入微信id（若填写微信号，则通过微信号找到网格经理的微信id；若未填写微信号，则通过姓名找到网格经理的微信id）', */
  },
  {
    name: '微信号',
    key: 'wxCode',
    type: 'input',
  },
  {
    name: '门户账号',
    key: 'portalAccount',
    type: 'input',
  },
  {
    name: '虚拟号码',
    key: 'virtualNumber',
    type: 'input',
  },
  {
    name: '供电单位',
    key: 'powerId',
    type: 'select-page',
    clearable: true,
    funName: 'getByAreaQueryByPower',
    option: {
      name: 'powerName',
      value: 'powerId',
    },
  },
  {
    name: '相关片区/村社',
    key: 'communityDtoList',
    type: 'select-pop',
    showManager: false,
    handleFn: handleFn,
    placeholder: '请选择相关片区/村社，多选',
  },
  {
    name: '备注',
    key: 'remark',
    type: 'textarea',
    maxlength: '300',
    'show-word-limit': true,
  },
]);
const communityList = ref([]);
const rules = reactive({
  managerName: [{ required: true, message: '请输入', trigger: 'change' }],
  phoneNumber: [
    { required: true, message: '请选择', trigger: 'change' },
    { validator: validatePhoneNumber, trigger: 'blur' },
  ],
  wxId: [{ required: true, message: '请输入', trigger: 'change' }],
  portalAccount: [{ required: true, message: '请输入', trigger: 'change' }],
  virtualNumber: [{ required: true, message: '请输入', trigger: 'change' }],
  communityDtoList: [{ required: true, message: '请选择', trigger: 'change' }],
  powerId: [{ required: true, message: '请选择', trigger: 'change' }],
});
const ruleForm = ref({
  managerId: '',
  managerName: '',
  phoneNumber: '',
  wxId: '',
  communityDtoList: '',
  remark: '',
  virtualNumber: '',
  portalAccount: '',
  wxCode: '',
  powerId: '',
  powerName: '',
});
watch(
  () => [...communityList.value],
  () => {
    ruleForm.value.communityDtoList = communityList.value.map((e) => e.communityName).join(',');
  },
);
watch(
  () => ruleForm.value.powerId,
  (newValue, oldValue) => {
    if (newValue != oldValue) communityList.value = [];
  },
);
const handleOk = () => {
  const wxId = ruleForm.value.wxId.trim();
  if (props.item.managerId) {
    return basicConfigService.manageUpdate({
      data: {
        ...ruleForm.value,
        wxId,
        communityIdList: communityList.value.map((e) => e.communityId),
      },
    });
  } else {
    return basicConfigService.manageBatchSave({
      data: [
        {
          ...ruleForm.value,
          wxId,
          communityIdList: communityList.value.map((e) => e.communityId),
        },
      ],
    });
  }
};

const handleCancel = () => {
  emit('update:dialogVisible', false);
};
onMounted(() => {
  if (props.item.managerId) {
    ruleForm.value.managerId = props.item.managerId;
    ruleForm.value.managerName = props.item.managerName;
    ruleForm.value.phoneNumber = props.item.phoneNumber;
    ruleForm.value.wxId = props.item.wxId;
    ruleForm.value.remark = props.item.remark;

    ruleForm.value.virtualNumber = props.item.virtualNumber;
    ruleForm.value.portalAccount = props.item.portalAccount;
    ruleForm.value.wxCode = props.item.wxCode;
    ruleForm.value.powerId = props.item.powerId;
    ruleForm.value.powerName = props.item.powerName;
    setTimeout(()=>{
      communityList.value = props.item.communityDtoList;
    },1000)
   
  }
});
</script>

<style lang="scss" scoped></style>
